<template>
  <div class="container">
    <div class="header"></div>
    <dv-full-screen-container>
      <dv-border-box-11 title="口岸数字化贸易平台">
        <div class="content">
          <div class="left">
            <dv-border-box-1>
              <div id="g2plot-container"></div>
            </dv-border-box-1>
<!--            <dv-border-box-8>dv-border-box-8</dv-border-box-8>-->
          </div>
          <div class="right">
            <div class="top">
              <dv-border-box-3>
                <dv-active-ring-chart :config="config1" style="width:100%;height:380px;" />
              </dv-border-box-3>
            </div>
            <div class="bottom">
              <dv-border-box-8 :reverse="true">
                <dv-scroll-board :config="config2" style="width:98%;height:350px;margin: 0 auto;padding: 1px 1px;" />
              </dv-border-box-8>
            </div>
          </div>
        </div>
      </dv-border-box-11>
    </dv-full-screen-container>
  </div>
</template>

<script>
import { BidirectionalBar } from '@antv/g2plot';
const g2Data = [
  { country: '俄罗斯', '2022年进口量': 13.4, '2022年班列': 12.3 },
  { country: '二连浩特', '2022年进口量': 14.4, '2022年班列': 16.3 },
  { country: '满洲里', '2022年进口量': 18.4, '2022年班列': 18.3 },
  { country: '巴基斯坦', '2022年进口量': 34.4, '2022年班列': 13.8 },
  { country: '阿根廷', '2022年进口量': 44.4, '2022年班列': 19.5 },
  { country: '巴西', '2022年进口量': 24.4, '2022年班列': 18.8 },
  { country: '加拿大', '2022年进口量': 54.4, '2022年班列': 24.7 },
  { country: '中国', '2022年进口量': 104.4, '2022年班列': 15.3 },
  { country: '郑州', '2022年进口量': 115.2, '2022年班列': 72.9 },
];
export default {
  name: 'index',
  data() {
    return {
      g2BarPlotData: [],
      config1: {
        radius: '55%',
        activeRadius: '60%',
        lineWidth: 45,
        data: [
          {
            name: '二连浩特',
            value: 55
          },
          {
            name: '满洲里',
            value: 120
          },
          {
            name: '郑州',
            value: 78
          },
          {
            name: '俄罗斯',
            value: 66
          },
          {
            name: '新乡',
            value: 80
          }
        ],
        digitalFlopStyle: {
          fontSize: 20,
          fill: '#ddd'
        },
        showOriginValue: true
      },
      config2: {
        // header: ['年度','口岸', '进口量', '班列(次)'],
        headerHeight: 60,
        data: [
          ['2020','二连浩特', '97', '12'],
          ['2020','满洲里', '97', '12'],
          ['2020','郑州', '97', '12'],
          ['2021','郑州', '97', '12'],
          ['2022','二连浩特', '97', '12'],
          ['2023','二连浩特', '97', '12'],
          ['2023','二连浩特', '97', '12'],
          ['2023','二连浩特', '97', '12'],
          ['2023','二连浩特', '97', '12'],
          ['行10列1', '行10列2', '行10列3','']
        ]
      }
    }
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.g2plotRender();
    // });
    setTimeout(() => {
      this.g2plotRender();
    },2000)
  },
  methods: {
    g2plotRender() {
      const BidirectionalBarPlot = new BidirectionalBar('g2plot-container', {
        data: g2Data,
        xField: 'country',
        xAxis: {
          position: 'bottom',
        },
        interactions: [{ type: 'active-region' }],
        yField: ['2022年进口量', '2022年班列'],
        tooltip: {
          shared: true,
          showMarkers: false,
        },
      });
      BidirectionalBarPlot.render();
    },

  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/css/index.scss";
.container {
  background-color: rgb(9, 18, 32);
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .header {
    height: 10px;
    background-color: #fff;
  }
  ::v-deep #dv-full-screen-container {
    .dv-border-box-11 {
       background-color: rgb(9, 18, 32);
      .content {
        padding: 40px 20px;
        display: flex;
        &>.left {
          flex: 2;
          margin-top: 10px;
          padding: 30px;
          #g2plot-container {
            width: 90%;
            height: 98%;
            margin: 0 auto;
          }
        }
        &>.right {
          flex: 1;
          display: flex;
          flex-direction: column;
          &>.top {
            margin-top: 20px;
          }
          &>.bottom {
            margin-top: 10px;
          }
        }
      }
    }
  }
}
</style>
